<template>
    <div id="word-result">
      <!-- 列表数据 -->
      <table>
        <tr>
          <td>&nbsp;&nbsp;
            <el-button type="primary" v-if="user.userType==1" icon="el-icon-add"
                       @click="addWordModuleAction">去听写</el-button>
          </td>
          <td><el-input v-model="queryModuleName" placeholder="请输入内容"></el-input></td>
          <td><el-button type="primary" icon="el-icon-search" @click="findWordCheckListPage(1)">搜索</el-button></td>
        </tr>
      </table>
        <br>

        <el-table
          :data="wordCheckListData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="moduleName"
            label="模板名称"
            width="180">
          </el-table-column>

          <el-table-column
            prop="schoolDate"
            label="入学年份">
          </el-table-column>

          <el-table-column
            prop="className"
            label="班级">
          </el-table-column>

          <el-table-column
            prop="studentName"
            label="学生名称">
          </el-table-column>

          <el-table-column
            prop="workTrueCount"
            label="正确单词量">
          </el-table-column>

          <el-table-column
            prop="workCountAll"
            label="总单词量">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="showDataDetailAction(scope.row)" type="text" size="small">查看明细</el-button>
                    <!--非学生用户拥有删除权限  v-if="this.$store.state.user.user.userType==2" -->
              <el-button v-if="user.userType==2" @click="toDeleteWordModuleAction(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <br/>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, prev, sizes,pager, next,jumper"
        :total="total">
      </el-pagination>


      <!--    弹出框 去选择模板  -->
      <el-dialog title="选择模板" width="100%" :visible.sync="dialogFormVisible">

        <el-form :model="form">
          <el-form-item label="单词模板">
            <el-select ref="moduleDataRef" v-model="form.moduleName" placeholder="请选择入单词模板">
              <el-option v-for="item in moduleDistList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible=false">取 消</el-button>
          <el-button type="primary" @click="toExamPage()">开始单词考试</el-button>
        </div>
      </el-dialog>


      <!--  弹出框，查看结果详情  -->
      <el-dialog title="查看明细" width="100%" :visible.sync="dialogFormVisibleDetail">
        <span>{{this.$store.state.wordCheck.wordCheckData.moduleName}}</span>
        <br/><br/>
        <word-check-detail></word-check-detail>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleDetail=false">取 消</el-button>
<!--          <el-button type="primary" @click="toExamPage()">开始单词考试</el-button>-->
        </div>
      </el-dialog>


    </div>
</template>

<script>

  import WordCheckDetail from './WordCheckDetail'
    import ElementUI from "element-ui";
    import Bus from "../course/bus";
  import {mapState} from "vuex";

    export default {
        name: "word-result",
        components: {
          WordCheckDetail
        },
        data() {
          return {
            moduleDistList: [
              {
                value: '',
                label: '全部模板'
              }
            ],
            // wordModuleTableIsShow: false,
            //颜色选择下拉框
            studentStatusList: [
              {value: 0,label: '已停用'},
              {value: 1,label: '已启用'}
              ],
            wordCheckListData: [],
            pageSize:5,//每页多少条
            total:20,//总条数
            currentPage:1,//当前页
            queryModuleName:'',
            form: {//form表单数据
              id:'1',
              status:'2',
              moduleName: '',
            },
            formLabelWidth: '120px',//form表单样式大小
            dialogFormVisible: false,
            dialogFormVisibleDetail:false,
          }
        },
      methods:{
        //查看明细
        showDataDetailAction(data){

          this.dialogFormVisibleDetail = true;
          const params = {id:data.id}
          this.$store.dispatch("wordCheck/findDetailToStudent", params).then((res) => {
          }).catch((e) => {
            console.log(e)
          });

          // //发送id给编辑页面
          // //这种使用方式 解决刷新后第一次对方接收不到数据的问题
          // this.$nextTick(function () {
          //   //更新数据id
          //   Bus.$emit('toWordModuleIdAction', this.form.id);
          // });

        },

        //删除数据
        toDeleteWordModuleAction(data){
            let moduleName = data.moduleName;
            this.$confirm('正在删除('+moduleName+')  是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              //删除
              this.deleteWordModuleAction(data.id);
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          //删除数据
          deleteWordModuleAction(id) {
            console.log("...........")

            this.$store.dispatch("wordCheck/deleteWordCheck", id).then((res) => {
              // console.log("============2 " + JSON.stringify(res))
              //刷新数据
              this.findWordCheckListPage(this.currentPage);//表格数据内容
              // this.refreshStudentList();//刷新学生下拉列表数据
              ElementUI.Message({
                message: '删除成功',
                type: 'success'
              });
            }).catch((e) => {
              console.log(e)
            });
          },

        //添加数据
          addWordModuleAction(){
            //初始化数据
            this.form = {id:'',status:1,moduleName: ''};
            this.dialogFormVisible = true;
          },
        //去考试页面
        toExamPage(){
          const moduleId = this.form.moduleName
          // console.log("moduleId "+moduleId)
          if(moduleId==null||moduleId==''){
            ElementUI.Message({
              message: '模板名称不能为空',
              type: 'warning'
            });
            return;
          }
          const params = {moduleId:moduleId}
          this.$store.dispatch("wordModule/selectModuleDataById", params).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
          }).catch((e) => {
            console.log(e)
          });
          //隐藏表单
         this.dialogFormVisible = false;
          //跳转到考试界面
          this.$router.push('/word/input')
        },


        handleCurrentChange(val) {
          //当前页
          // console.log("当前页 "+val);
          this.findWordCheckListPage(val);
        },
        handleSizeChange(val) {
          this.pageSize = val;
          this.findWordCheckListPage(1);
          console.log(`每页 ${val} 条`);
        },

        //列表查询
        findWordCheckListPage(thisPage){
          const params  = {
            "pageSize":this.pageSize,
            "page":thisPage,
            "moduleName":this.queryModuleName
          }
          const studentUser= this.$store.state.sportStudent.studentUser
          if(studentUser!=null && studentUser!=undefined){
            params.sportStudentId = studentUser.id
          }
          // console.log('params ' +JSON.stringify(params))
          this.$store.dispatch("wordCheck/getListPageData", params).then((res) => {
            if(res!=null){
              this.currentPage = res.page
              this.total = res.total
              this.wordCheckListData = res.rows
            }
            // console.log("============2 " + JSON.stringify(this.wordCheckListData))
          }).catch((e) => {
            console.log(e)
          });
        },


        // 查询模板列表
        selectModuleDistList () {
          const params = {userCode:''}
          this.$store.dispatch("wordModule/selectModuleDistList",params).then((res) => {
            // console.log("============res " + JSON.stringify(res))

            if (res != null) {
              this.moduleDistList = []
              this.moduleDistList = res
            }
          }).catch((e) => {
            console.log(e)
          });
        },


      },
      computed:{
        //映射 sportStudent模块下的 studentUser对象
        ...mapState('user', ['user'])
      },

      created() {
        this.selectModuleDistList()
        this.findWordCheckListPage(1);//表格数据内容
        //点击按钮刷新数据
        Bus.$off('toWordCheckRefreshAction');//防止出现多次调用，在执行的时候需要卸掉
        Bus.$on('toWordCheckRefreshAction', data => {
          // console.log("刷新了数据");
          this.findWordCheckListPage(1);//表格数据内容
        });

      }

    }
</script>

<style scoped>

</style>
